<template lang="pug">
transition(tag="div", enter-active-class="animated bounceInLeft", leave-active-class="animated bounceOutLeft")
  .pano-store(v-show='isShow')
    .scroll-wrap(@scroll='scroll' ref='scrollWrap')
      .close(@click='isShow = false')
        i.iconfont.icon-prev
      .company-info
        .top
          img(:src='companyInfo.full_logo_url')
        .bottom
          .info-row.company-title
            i.iconfont.icon-home
            span.text(style='font-size: 18px;') {{companyInfo.company_name}}
          .info-row
            i.iconfont.icon-dianhua
            span.text(style='font-size: 18px;') {{companyInfo.contact_phone}}
          .info-row
            i.iconfont.icon-daohang
            span.text {{companyInfo.address}}
      .qrcode
        img(:src="qrcodeUrl + '?newpano=true&id=' + panoInfo.pano_id")

      .main-content
        .oprations(:class='{fixed: isFixed}')
          .search-opts
            input.input-common.search-input(v-model="opts.keyword" placeholder='输入关键词')
            button.button-common(@click='getRelativePano(1)') 搜索
          .tabs
            .tab-pane(v-for='(item, index) in tabs' :key='index' @click='curTab = index' :class='curTab === index ? "active" : ""') {{item}}
        .tab-content

          .project-list(v-show="curTab === 0")
            a.list(v-for="(item, index) in panoList.list" :key="index" @click='checkoutPano(item.panoview_url)')
              .cover
                img(:src='item.full_image_url')
                .text
                  .company-name.omit {{item.company_name}}
                  .view-count
                    i.iconfont.icon-eye
                    span {{item.seecount}}
              .bottom
                .project-name {{item.project_name}}
            .load-more
              .load-more-button(@click='loadMore' v-if="!loading") {{panoList.list.length >= panoList.count ? '没有更多了' : '加载更多'}}
              .load-more-button(v-else)
                i.el-icon-loading
                span 加载中...

          .project-dec(v-show="curTab === 1")
            span {{companyInfo.pano_dec || '没留下作品简介'}}

          .company-dec(v-show="curTab === 2")
            span {{companyInfo.description || '没留下公司简介'}}

</template>
<script>
import $API from '@/api/services'
import { mapGetters } from "vuex";
export default {
  data () {
    return {
      isFixed: false,
      isShow: false,
      qrcodeUrl: window.$globalconfig.URLS.QRCODE,
      curTab: 0,
      companyInfo: {},
      panoList: { list: [], count: -1 },
      tabs: ['相关作品', '作品简介', '公司简介'],
      opts: {
        page: 1,
        pageSize: 10,
        tagId: '',
        keyword: ''
      },
      loading: false
    }
  },
  created () {
    //this.opts.tagId = this.panoInfo.tag_id
    this.opts.user_id = this.panoInfo.user_id
    this.$vgo.on('openPanoStore', () => {
      this.isShow = true
      if (!Object.keys(this.companyInfo).length)this.getCompanyInfo()
      if(this.panoList.count < 0) this.getRelativePano()
    })
  },
  computed: {
    ...mapGetters(['panoInfo'])
  },
  methods: {
    scroll() {
      this.isFixed = !!this.$refs.scrollWrap.scrollTop
    },
    checkoutPano(url) {
      window.location.href = url
      setTimeout(() => {
        window.location.reload()
      }, 100);
    },
    getCompanyInfo () {
      $API('getCompanyInfo', [{ userId: this.panoInfo.user_id, panoId: this.panoInfo.pano_id }]).then(({ data }) => {
        this.companyInfo = data
      })
    },
    getRelativePano (isreset) {
      if (isreset) {
        this.panoList.list = []
      }
      $API('getRelativePano', [this.opts]).then(({ data }) => {
        this.panoList.list.push(...data.list)
        this.panoList.count = data.count
        this.loading = false
      })
    },
    loadMore () {
      if (!this.loading && this.panoList.list.length < this.panoList.count) {
        this.loading = true
        this.opts.page += 1
        this.getRelativePano()
      }
    }
  },
}
</script>
<style lang="stylus">
@import '~@/assets/styles/color.styl'
.input-common
  margin: 0;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  outline: 0;
  padding: 0 5px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
  padding-right: 30px;
  height: 32px;
  line-height: 32px;

.button-common
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #FFF;
  border: 1px solid #DCDFE6;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
  font-size: 12px;
  border-radius: 3px;
  padding: 9px 15px;

$bgc = rgba(0,0,0,0.8)

.pano-store
  background-color $bgc
  max-width 40vw
  width 228px
  height 100vh
  position fixed
  top 0
  left 0
  z-index 999
  box-sizing border-box
  color #fff
  display flex
  flex-direction column
  *
    box-sizing border-box
  ::-webkit-scrollbar
    width 0px!important
  .scroll-wrap
    overflow-y auto
  .close
    position: absolute
    top: 50%
    right 0
    height: 40px
    line-height: 40px
    width: 24px
    transform: translate(100%, -50%)
    font-size: 14px
    border-radius: 0 50% 50% 0
    display: flex
    justify-content: center
    background-color: $bgc
    color: #fff
    cursor pointer
    i
      font-size 24px
      margin-right 10px
  .company-info
    width 100%
    min-height 130px
    padding 20px 10px
    .top
      img
        margin auto
        display block
        width 40%
    .bottom
      margin 10px 0
      .info-row
        width 100%
        padding 0 10px
        margin-bottom 6px
        word-wrap: break-word
        display flex
        i
          margin-right 5px
        span
          flex 1
          width 0

  .qrcode
    img
      margin auto
      display block
      width 40%
      padding 10px 0
      min-width 120px
  .main-content
    width 100%
    flex-direction column
    .oprations
      position sticky
      &.fixed
        position fixed
        padding 10px 0
        z-index 999
        top 0
        left 0
        max-width 40vw
        background-color #fff
        width 228px
        background-color: $bgc
    .search-opts
      width 100%
      padding 0 5px
      padding-bottom 15px
      .search-input
        width calc(100% - 70px)
        margin-right 10px
    .tabs
      padding-bottom 5px
      width 100%
      display flex
      .tab-pane
        text-align center
        cursor pointer
        padding 7px 0px
        border 1px solid #424146
        text-align center
        background rgb(39, 43, 46)
        margin 0px 0.5px
        flex 1
        &.active
          background-color $blue
    .tab-content
      width 100%
      display flex
      overflow-y auto
      -webkit-overflow-scrolling: touch
      padding 5px
      .project-list
        width 100%
        a.list
          color #fff
          width 100%
          display block
          .cover
            width 100%
            position relative
            height 110px
            img
              width 100%
              height 100%
            .text
              width 100%
              padding 0 5px
              position absolute
              bottom 0
              left 0
              display flex
              justify-content space-between
              text-shadow 0 0 10px #000
              .company-name
                width 60%
              .view-count
                i.iconfont.icon-eye
                  margin-right 5px
          .bottom
            width 100%
            .project-name
              line-height 26px
              width 100%
        .load-more
          padding-bottom 30px
          .load-more-button
            background-color $blue
            line-height 24px
            border-radius 5px
            text-align center
            width 60%
            margin 5px auto
            cursor pointer
</style>